import { Card, Spin, Pagination, Image as AntdImage, Carousel, Tree, Space, message, Checkbox, Popconfirm, Dropdown, Menu, Row, Col } from "antd";
import { useModel, history, useLocation, Outlet } from "umi";
import { Button, ButtonGroup, Card as SemiCard, List } from "@douyinfe/semi-ui";
import { IconPlusCircle, IconRefresh, IconDelete } from "@douyinfe/semi-icons";
import { useReactive } from "ahooks";
import { useEffect } from "react";

const CommodityDetailPage = () => {
	const location = useLocation();
	const { routers } = useModel("routers");
	const { remoteData, platforms, goipfs, windowInnerHeight } = useModel("global", (model) => model);

	const state = useReactive({
		loading: false,
		menus: [],
		selectMenuKey: null,
	});

	useEffect(() => {
		const pathname = location.pathname.substr(1);
		let paths = pathname.split("/");
		if (paths.length >= 2) {
			let subMenus = routers[paths[0]].subMenus[paths[1]].subMenus;
			let menus = Object.keys(subMenus).map((key) => {
				const { title } = subMenus[key];
				return { key, title };
			});
			state.menus = menus;
			let selectMenu = menus.find((item) => item.key === state.selectMenuKey);
			!selectMenu && menus.length > 0 && (selectMenu = menus[0]);
			state.selectMenuKey = selectMenu.key;
		}
	}, []);

	useEffect(() => {
		const commodity = location.state?.commodity || {};
		if (state.selectMenuKey && commodity) {
			history.replace("/commodities/detail/" + state.selectMenuKey, { commodity: commodity });
		}
	}, [state.selectMenuKey]);

	// 窗口头部：30，应用头：60，页头：59，操作区内边距：24，卡面头：51，卡面脚：56,修正值：4
	const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;
	return (
		<div>
			<SemiCard
				title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>商品详情</span>}
				headerStyle={{ padding: "10px 14px" }}
				shadows="always"
				bordered={false}
				size="default"
				bodyStyle={{ padding: 0, height: cardBodyHeight }}
				headerExtraContent={
					<Space>
						<Button onClick={() => history.replace("/commodities/list")}>返回</Button>
					</Space>
				}
			>
				<div style={{ display: "flex" }}>
					<div style={{ padding: 1, width: 200, borderRight: "1px solid #eee", height: cardBodyHeight + 54, overflow: "auto" }}>
						<List
							loading={state.loading}
							dataSource={state.menus}
							renderItem={(item, index) => {
								return (
									<List.Item
										className={`list-item ${state.selectMenuKey === item?.key ? "list-item-selected" : ""}`}
										main={<div>{item.title}</div>}
										onClick={() => (state.selectMenuKey = item.key)}
									/>
								);
							}}
						/>
					</div>
					<div style={{ flex: 1, height: cardBodyHeight, overflow: "auto" }}>
						<Outlet context={{ cardBodyHeight }} />
					</div>
				</div>
			</SemiCard>
		</div>
	);
};

export default CommodityDetailPage;
